<template>
  <div>
    <SearchList/>
    <!-- 轮播图 -->
    <swiper indicator-dots autoplay circular indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff">
        <block v-for="item in swiperList" :key="item.goods_id">
            <swiper-item>
                <image :src="item.image_src"></image>
            </swiper-item>
        </block>
    </swiper>
    <!-- 分类 -->
    <ul class="cates">
      <li v-for="(item, index) in calssification" :key="index">
        <img :src="item.image_src">
      </li>
    </ul>
    <!-- 楼层 -->
    <ul v-for="(item, index) in floorList" :key="index">
      <li class="floor-item">
        <img :src="item.floor_title.image_src">
        <div class="products">
          <img :src="item.product_list[0].image_src">
          <div class="right">
            <block  v-for="(items, indexs) in item.product_list" :key="indexs">
              <img v-if="indexs" :src="items.image_src">
            </block>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import SearchList from '../../components/SearchList.vue'
export default {
  data () {
    return {
      swiperList: [],
      calssification: [],
      floorList: []
    }
  },
  created () {
    this.getSwiperList()
    this.getClassification()
    this.getFloorList()
  },
  methods: {
    async getSwiperList () {
      this.swiperList = await this.$request({
        url: '/api/public/v1/home/swiperdata'
      })
    },
    async getClassification () {
      this.calssification = await this.$request({
        url: '/api/public/v1/home/catitems' // 开发者服务器接口地址"
      })
    },
    async getFloorList () {
      this.floorList = await this.$request({
        url: '/api/public/v1/home/floordata' // 开发者服务器接口地址"
      })
    }
  },
  components: {
    SearchList
  }
}
</script>

<style lang="less">
swiper image {
  width: 100%;
  height: 340rpx;
}

.cates {
  height: 194rpx;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  img {
    width: 128rpx;
    height: 140rpx;
  }
}

.floor-item {
  margin-bottom: 20rpx;
  >img {
    width: 100%;
    height: 88rpx;
  }
  .products {
    margin-top: 20rpx;
    display: flex;
    padding-left: 18rpx;
    >img {
      width: 232rpx;
      height: 386rpx;
    }
    .right {
      flex: 1;
      >img {
        width: 232rpx;
        height: 188rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>